import "./index.less";
import React, { useState } from "react";
import { View } from "@tarojs/components";
import { Cell, Button, Avatar, Image } from "@nutui/nutui-react-taro";
import {
  ArrowRightSize6,
  TriangleDown,
  Scan,
  ArrowRight,
} from "@nutui/icons-react-taro";
import { pxTransform } from "@tarojs/taro";

function Header({ drinkers }) {
  return (
    <Cell className="header">
      <view className="header_l">
        <Avatar
          style={{ width: pxTransform(128), height: pxTransform(128) }}
          src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
        />
        <View className="info">
          <View className="info_name">我的宝宝</View>
          <View className="birth">
            <ArrowRightSize6></ArrowRightSize6>5岁4月18日
          </View>
        </View>
      </view>
      <View className="header_r">
        <ArrowRightSize6></ArrowRightSize6>
      </View>
    </Cell>
  );
}

function Device({ drinkers }) {
  return (
    <Cell className="dev">
      <View className="dev_top">
        <View style={{ fontWeight: "bold" }}>我的设备</View>
        <Button
          color="#FFECD7"
          className="btn_more"
          style={{ color: "#C27E32" }}
          rightIcon={<TriangleDown color="#C27E32" />}
        >
          更多
        </Button>
      </View>
      <View className="dev_mid">
        <View className="mid_l">
          <img src={require("@/assets/ibook.png")} />
          <View className="mid_info">
            <View className="mid_name">设备名称</View>
            <View className="mid_id">设备ID：CLS0125000177</View>
          </View>
        </View>
      </View>
      <View className="dev_bot">
        <Button
          block
          type="primary"
          color="#FFD667"
          className="add_btn"
          icon={<Scan color="#fff" />}
        >
          添加设备
        </Button>
      </View>
    </Cell>
  );
}

function List({ drinkers }) {
  return (
    <Cell.Group>
      <Cell
        align="center"
        title={
          <View style={{ display: "inline-flex", alignItems: "center" }}>
            <Image
              src={require("@/assets/book2.png")}
              height={pxTransform(48)}
              width={pxTransform(48)}
            />
            <View style={{ marginLeft: "30px" }}>在线充值</View>
          </View>
        }
        extra={<ArrowRight defaultChecked />}
      />
      <Cell
        className="nutui-cell-clickable"
        title={
          <View style={{ display: "inline-flex", alignItems: "center" }}>
            <Image
              src={require("@/assets/book2.png")}
              height={pxTransform(48)}
              width={pxTransform(48)}
            />
            <span style={{ marginLeft: "30px" }}>在线客服</span>
          </View>
        }
        extra={
          <View>
            <span style={{ marginRight: "5px" }}></span>
            <ArrowRight />
          </View>
        }
        align="center"
        onClick={(event) => {}}
      />
      <Cell
        className="nutui-cell-clickable"
        title={
          <View style={{ display: "inline-flex", alignItems: "center" }}>
            <Image
              src={require("@/assets/book2.png")}
              height={pxTransform(48)}
              width={pxTransform(48)}
            />
            <span style={{ marginLeft: "30px" }}>账号管理</span>
          </View>
        }
        extra={
          <View>
            <span style={{ marginRight: "5px" }}></span>
            <ArrowRight />
          </View>
        }
        align="center"
        onClick={(event) => {}}
      />
    </Cell.Group>
  );
}

function User() {
  return (
    <View className="userBox">
      <Header />
      <Device />
      <List />
    </View>
  );
}

export default User;
